<script setup lang="ts">
import { ref } from 'vue';

const adver = ref(false)

const mouseOver = () => {
    adver.value = true
}

// const mouseOut = () => {
//     adver.value = false
// }
</script>

<template>
    <div class="logos">
        <div class="left">
            <img src="../../../assets/919d3399d58373051a0ad11b786d7d9.png" alt="">
        </div>
        <div class="rigth" >
            <ul>
                <li @mouseover="mouseOver" >
                    
                    For Advertisers
                </li>
                <li>
                    For Publishers
                </li>
                <li>
                    Company
                </li>
                <li>
                    Resources
                </li>
            </ul>
            <div></div>
        </div>

    </div>
  
</template>

<style scoped lang="less">
.advertisers {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    height: 30vh;
    background-color: pink;
}

.logos {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 81px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .08);

    .left {
        display: flex;
        align-items: center;
        margin-right: 10vw;
        // width: 20vw;
        // height: 100%;
    }

    .rigth {
        width: 40vw;
        height: 100%;
        color: #6f7c95;

        ul {
            display: flex;
            justify-content: space-around;
            align-items: center;

            li {
                width: 15vw;
                margin-top: 10px;
            }
        }
    }
}
</style>
